<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title th:text="${activity.getName()}"></title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/layui/layui.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/index.js" type="text/javascript"></script>
    <script src="/ss/static/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/sliders.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/html5.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/freezeheader.js" type="text/javascript"></script>
    <script src="/ss/static/js/custom.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>
<body>
<div th:replace="template.html::header"></div>

<div class="layui-container container" style=" padding-top:50px;">
    <div class="fly-home">
        <img th:src="${activity.getFace()}">
        <h1 th:text="${activity.getName()}">
        </h1>
        <h2 class="fly-home-sign" th:text="'主办方: ' + ${association.getName()}"
            style="color: darkorange; font-weight: bold"></h2>
        <h2 class="fly-home-sign"
            th:text="'起止时间: ' + ${#dates.format(activity.getStart(), 'yyyy-MM-dd')} + ' 到 ' + ${#dates.format(activity.getEnd(), 'yyyy-MM-dd')}"></h2>
        <h2 class="fly-home-sign" th:text="'预估人数: ' + ${activity.getPeople()} + '人'"></h2>
        <h2 class="fly-home-sign" th:text="'平均评分: ' + ${star}"></h2>
        <h2 class="fly-home-sign" th:text="'评分人数: ' + ${stars}"></h2>
        <h2 class="fly-home-sign" th:text="'活动地点: ' + ${activity.getLocation()}"></h2>
        <h2 class=" fly-home-sign" th:text="'活动内容: ' + ${activity.getContent()}"></h2>
        <h2 th:if="${master.getUid() == user.getUid()}" style="cursor: pointer"
            th:onclick="'openPanel('+${activity.getCid()}+', \'activity\')'">
            编辑活动信息
            <svg width="18" height="18"
                 viewBox="0 0 48 48" fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M7 42H43" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"/>
                <path d="M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z" fill="none" stroke="#333"
                      stroke-width="4"
                      stroke-linejoin="round"/>
            </svg>
        </h2>
        <h2 th:if="${master.getUid() == user.getUid()}" style="cursor: pointer"
            th:onclick="'deleteActivity('+${activity.getCid()}+')'">
            删除活动
            <svg width="18" height="18" viewBox="0 0 48 48" fill="none"
                 xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
                <path d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4"
                      stroke-linejoin="round" style=""></path>
                <path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"></path>
                <path d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"></path>
                <path d="M4 10H44" stroke="#333"
                      stroke-width="4"
                      stroke-linecap="round"
                      stroke-linejoin="round"></path>
                <path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333"
                      stroke-width="4"
                      stroke-linejoin="round"></path>
            </svg>
        </h2>
    </div>

    <div class="main fly-home-main" style="border:0px; border-style:solid">
        <div class="layui-inline fly-home-jie">
            <div class="cloud">
                <h3 th:text="'参与者: ' + ${participants.size()} + '人'"></h3>
                <ul>
                    <li th:each="participant: ${participants}">
                        <a th:text="${participant.getName()}"></a>
                    </li>
                </ul>
            </div>
            <div th:if="${is_join && !starred}" class="article-main">
                <h2>
                    打星
                </h2>
                <div class="layui-tab-content" style="padding: 20px 0;">
                    <div class="layui-form-pane layui-tab-item layui-show">
                        <div class="layui-form-item layui-form-text">

                            <div class="layui-input-block">
                                <label style="margin-right: 10px">
                                    <a>1星</a>
                                    <input type="radio" name="star" value="1">
                                </label>
                                <label style="margin-right: 10px">
                                    <a>2星</a>
                                    <input type="radio" name="star" value="2">
                                </label>
                                <label style="margin-right: 10px">
                                    <a>3星</a>
                                    <input type="radio" name="star" value="3">
                                </label>
                                <label style="margin-right: 10px">
                                    <a>4星</a>
                                    <input type="radio" name="star" value="4">
                                </label>
                                <label style="margin-right: 10px">
                                    <a>5星</a>
                                    <input type="radio" name="star" value="5">
                                </label>
                            </div>
                            <button onclick="star(1,1)" class="layui-btn" lay-filter="*" style="margin-top: 5px">打星
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="article-main">
                <h2>
                    评论
                </h2>
                <div class="layui-tab-content" style="padding: 20px 0;">
                    <div class="layui-form layui-form-pane layui-tab-item layui-show">
                        <div class="layui-form">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">请发表你的评论</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="写一些你对该活动的看法" id="content" autocomplete="off"
                                              class="layui-textarea" style="height: 80px;"></textarea>
                                </div>
                                <button th:onclick="'post(' + ${user.getUid()} + ',' + ${activity.getCid()} + ')'"
                                        class="layui-btn" lay-filter="*" style="margin-top: 5px">发表评论
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:if="${comments.size() != 0}" class="article-list" th:each="comment : ${comments}">
                    <img style="max-width: 80px;max-height: 80px;margin: 0 50px;"
                         th:src="${users.get(commentStat.index).getFace()}">
                    <ul>
                        <h3>
                            <a th:text="${users.get(commentStat.index).getName()}"></a>
                        </h3>
                        <p th:text="${comment.getContent()}"></p>
                        <p class="autor">
                            <span>
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="40"
                                                                                          height="40" rx="2" fill="none"
                                                                                          stroke="#333" stroke-width="4"
                                                                                          stroke-linecap="round"
                                                                                          stroke-linejoin="round"></rect><path
                                        d="M4 14H44" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><line x1="44" y1="11" x2="44" y2="23"
                                                                             stroke="#333" stroke-width="4"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"></line><path
                                        d="M12 22H16" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M22 22H26" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M32 22H36" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M12 29H16" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M22 29H26" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M32 29H36" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M12 36H16" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M22 36H26" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M32 36H36" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><line x1="4" y1="11" x2="4" y2="23" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></line></svg>
                                <a th:text="${#dates.format(comment.getTime(), 'yyyy-MM-dd HH:mm:ss')}"></a>
                            </span>
                        </p>
                    </ul>
                </div>
            </div>
            <!--分页-->
            <div th:if="${comments.size() != 0}" id="page"></div>
        </div>
    </div>

    <div id='activity-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">修改活动信息</h2>
            <input type="number" class="layui-input" style="display: none" id="activity-aid">
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-name"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">内容:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-content"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">开始时间:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="activity-start"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">结束时间:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="activity-end"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动封面图片网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-face"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">预估人数:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-people"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动地点:&nbsp;</p>
                <input type="text" class="layui-input" style="align-self: center;width: 200px" id="activity-location"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">申请金额:&nbsp;</p>
                <input type="text" class="layui-input" style="align-self: center;width: 200px" id="finance-money"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="activity-button">
                修改
            </button>
        </div>
    </div>

    <div th:replace="template.html::footer"></div>
</div>
</body>

<script type="text/javascript">
    function post(uid, cid) {
        var json = {}
        json['uid'] = uid
        json['cid'] = cid
        json['content'] = document.getElementById('content').value
        json['time'] = new Date()
        $.ajax({
            url: 'api/activity_comment',
            type: 'post',
            data: JSON.stringify(json),
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) location.reload()
                else alert('发表评论失败')
            }
        })
    }

    function deleteActivity(cid) {
        $.ajax({
            url: 'api/activity/' + cid,
            type: 'delete',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) window.location = '/ss/index'
                else alert('删除活动失败')
            }
        })
    }

    function star(uid, cid) {
        document.getElementsByName('star').forEach(item => {
            if (!item.checked) return
            var star = {}
            star['uid'] = uid
            star['cid'] = cid
            star['star'] = parseInt(item.value)
            $.ajax({
                url: 'api/star',
                type: 'post',
                data: JSON.stringify(star),
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    if (result['success']) location.reload()
                    else alert('评分失败')
                }
            })
        })
    }
</script>
</html>
